<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城</title>
    <link rel="stylesheet" type="text/css" href="/shop/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loading.css"/>
    <link rel="stylesheet" href="/shop/css/swiper.min.css">
    <script src="/shop/js/rem.js"></script>
    <script src="/shop/js/jquery.min.js" type="text/javascript"></script>
    <script src="/shop/js/others.js"></script>
    <script src="/shop/js/swiper.jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300)
        });

        //添加购物车
        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }

        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));

            //获取URL上面商品的id
            var params = getParams();
            console.log(params.id);

            if (params.id) {
                //回显商品信息
                $.get("/products/" + params.id, function (data) {
                    console.log(data);
                    $(".warp").renderValues(data);
                    $(".sdetail").renderValues(data);
                });
            }
            //跳转到订单确认
            $(".btnone").click(function () {
                location.href = "/shop/confirm.html?id=" + params.id;
                /*$.post("/orders/2/" + params.id, {userId: user.id}, function (data) {
                    console.log(data);

                });*/
            });
            //跳转到购物车
            $("#sureBtn").click(function () {
                 //商品保存进购物车
                 $.post("/orders/" + params.id, {userId: user.id, orderNum: $("#count").html()}, function (data) {
                     if (data.success) {
                         $(document).dialog({
                             content: '添加购物车成功',
                             onClickConfirmBtn: function () {
                                 window.location.href = "/shop/shopcar.html?id=" + user.id;
                             }
                         });
                     }
                 })
            });
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>商品详情</h4>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="detail clearfloat">
        <!--banner star-->
        <div class="banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy" render-src="productImg" alt="">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--banner end-->
        <div class="top clearfloat box-s">
            <div class="shang clearfloat">
                <div class="zuo clearfloat fl over2 box-s" render-html="productName">
                </div>
                <div class="you clearfloat fr">
                    <i class="iconfont icon-fenxiang"></i>
                    <p>分享</p>
                </div>
            </div>
            <div class="xia clearfloat">
                <p class="jifen fl box-s"><samp render-html="productPrice"></samp>积分</p>
                <span class="fr">销量8件</span>
            </div>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品详情</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品评价</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
    </div>
</div>

<!--footerone star-->
<div class="footerone clearfloat">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">加入购物车</span>
        <a role="button" class="btn btnone fl">立即购买</a>
    </div>
</div>
<!--footerone end-->

<!--弹出购物车内容-->
<div class="am-share">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/shop/images/chahao.png"/></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img render-src="productImg"/>
                </div>
                <div class="you clearfloat fl">
                    <p class="tit" render-html="productName"></p>
                    <p class="jifen1 fl box-s"><samp render-html="productPrice"></samp>积分</p>
                </div>
            </div>
            <div class="bottom clearfloat">
                <p class="fl">购买数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="/shop/images/jian.jpg"/></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++">
                            <img src="/shop/images/jia.jpg"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <a class="shop-btn db" id="sureBtn">确定</a>
</div>
<script type="text/javascript">
    var down = document.getElementById("down");
    var count = document.getElementById("count");
    window.onload = function () {
        down.onclick = function () {
            if (count.innerHTML > 1) {
                count.innerHTML--;
            } else {
                count.innerHTML = 1;
            }
        };
        $(".middle .xia li").click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');
        });

    }
</script>
<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="shop.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li>
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>

</html>
